<template>
  <div>
    <div class="funeratitile">
      <img src="../../assets/funeralhome.png" alt="" class="img" />
    </div>
    <div style="display: flex; justify-content: center">
      <div class="funeralist">
        <div
          v-for="item in funeralist"
          :key="item.id"
          class="funeralbox"
          @click="funeradetail(item.id)"
        >
          <img :src="imgurl + item.cover_image" alt="" class="funeralpic" />
          <div class="funearltitle">{{ item.title }}</div>
        </div>
      </div>
    </div>
     <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :page-sizes="[8]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total"
       
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      funeralist: [],
      imgurl: "https://www.gongminlingyuanwang.cn/",
      currentPage: 1,
      pagesize: 8,
      Total: 0,
    };
  },
  created() {
    this.getfuneralist(1);
  },
  methods: {
    async getfuneralist(page) {
      const { data: res } = await this.$axios.get("index/getMortuaryArticle",{
        pageSize: 8,
        page:page,
      });
      this.Total = res.data.total
      this.funeralist = res.data.data;
      console.log(this.funeralist);
    },
    // 去殡仪馆详情
    funeradetail(id) {
      this.$router.push({
        path: "/funeradetail",
        query: {
          id: id
        }
      });
    },
    handleSizeChange(size) {
      this.pagesize = size
    
    },
    handleCurrentChange(currentPage) {
      //当前是哪一页
      this.currentPage = currentPage
      this.getfuneralist(currentPage)
    }
  }
};
</script>

<style lang="scss">
.funeratitile {
  display: flex;
  justify-content: center;
  padding-top: 3%;
  .img {
    width: 284px;
    height: 54px;
  }
}
.funeralist {
  width: 1300px;
  display: flex;
  flex-wrap: wrap;
  .funeralbox {
    margin-left: 40px;
    margin-top: 2%;
    width: 272px;
    height: 230px;
    border: 1px solid #efefef;
    border-top-right-radius: 10px;
    transition: transform 0.2s;
    .funeralpic {
      width: 272px;
      height: 192px;
    }
    .funearltitle {
      display: flex;
      justify-content: center;
      line-height: 30px;
    }
  }
  .funeralbox:hover {
    transform: scale(1.1);
  }
}
</style>
